import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入动画库
import 'animate.css';


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

Vue.config.productionTip = false
Vue.config.keyCodes.f1 = 112

// 全局过滤器
Vue.filter('setMsg',function(data,format){
  console.log(data,format)
  return data.replace('TMD','***')
})
Vue.filter('setMsg1',function(data,format){
  console.log(data,format)
  return data.replace('TMD','***')
})

// 全局定义自定义指令
// Vue.directive('自定义指令的名字',{bind,inserted,update})
// el:指令所绑定的dom元素，binding是个对象
// bind:指令第一次绑定到元素时使用  操作的是虚拟dom
Vue.directive('color',{
  bind(el, binding) {
    console.log(el,binding)

    // 绑定的属性值
    console.log(binding.value)
    el.style.color=binding.value
    // 如果el.style.color绑定的值是固定的，则不变
    // el.style.color="green"
    // 点击后才能获取焦点
    // el.focus()
  },
  // inserted 当元素渲染到界面上之后执行
  inserted(el){
    console.log(el)
    // 直接获取焦点
    el.focus()
  },
  // update 当元素有更新的时候执行
  update(el){
    console.log(el)
    console.log('update')
  }
})

// 4.将路由挂载到vue实例上
new Vue({
  router,
  store,
  render: h => h(App)  //操作虚拟dom
}).$mount('#app')  //控制区域
